<template>
  <div>
    <div slot="title" class="dialog-title">
      <el-row>
        <el-col :span="8">
          <el-row type="flex" justify="center">
            <h1 class="edu-font-3">菜单</h1>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="center">
            <h1 class="edu-font-3">接口</h1>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="center">
            <h1 class="edu-font-3">自定义权限标识</h1>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-row>
        <el-col :span="6" :offset="2">
          <el-row>
            <el-tree 
              ref="treeMenu" 
              node-key="id" 
              :data="menuList" 
              :default-checked-keys="menuIdsList" 
              default-expand-all
              check-strictly 
              :props="props" 
              show-checkbox></el-tree>
          </el-row>
        </el-col>
        <el-col :span="6" :offset="2">
          <el-row>
            <el-tree 
              ref="treeUrl" 
              node-key="id" 
              :data="urlList" 
              :default-checked-keys="urlIdsList" 
              default-expand-all check-strictly 
              :props="props" 
              show-checkbox></el-tree>
          </el-row>
        </el-col>
        <el-col :span="6" :offset="2">
          <el-row>
            <el-tree 
              ref="treeMark" 
              node-key="id" 
              :data="markList" 
              :default-checked-keys="markIdsList" 
              default-expand-all 
              check-strictly 
              :props="props" 
              show-checkbox></el-tree>
          </el-row>
        </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-row>
        <el-col :span="8">
          <el-row type="flex" justify="center">
            <el-button type="success" size="mini" @click="saveMenu()">保存</el-button>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="center">
            <el-button type="success" size="mini" @click="saveUrl()">保存</el-button>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="center">
            <el-button type="success" size="mini" @click="saveMark()">保存</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "RoleAuth",
  props: ["info", "visible"],
  data: function() {
    return {
      //树插件配置
      props: {
        label: "name",
        children: "childList"
      },
      //菜单树-左侧
      menuList: [],
      //菜单接口树-中间
      urlList: [],
      //菜单自定义标识树-右侧
      markList: [],
      //已勾选菜单-左侧
      menuIdsList: [],
      //已勾选接口-中间
      urlIdsList: [],
      //已勾选自定义标识-右侧
      markIdsList: []
    };
  },
  mounted: async function() {
    await this.load_1();
    this.load_2();
  },
  methods: {
    //该角色已勾选数据
    load_1: function() {
      this.ajax({
        url: this.API.role.findRoleAuthIds,
        data: this.info,
        success: resultData => {
          if (resultData.data.menu_ids && resultData.data.menu_ids.length) {
            this.menuIdsList = resultData.data.menu_ids.split(`,`);
          }
          if (resultData.data.url_ids && resultData.data.url_ids.length) {
            this.urlIdsList = resultData.data.url_ids.split(`,`);
          }
          if (resultData.data.mark_ids && resultData.data.mark_ids.length) {
            this.markIdsList = resultData.data.mark_ids.split(`,`);
          }
        }
      });
    },
    //三棵树数据
    load_2: function() {
      //菜单树-左侧
      this.ajax({
        url: this.API.menu.findNoOpenList,
        data: {},
        success: resultData => {
          this.menuList = resultData.data;
        }
      });
      //菜单接口树-中间
      this.ajax({
        url: this.API.role.findMenuUrlList,
        data: {},
        success: resultData => {
          this.urlList = resultData.data;
        }
      });
      //菜单自定义标识树-右侧
      this.ajax({
        url: this.API.role.findMenuMarkList,
        data: {},
        success: resultData => {
          this.markList = resultData.data;
        }
      });
    },
    //保存菜单权限
    saveMenu: function() {
      let para = {
        id: this.info.id,
        menu_ids: this.$refs.treeMenu.getCheckedKeys().join(`,`)
      };
      this.ajax({
        url: this.API.role.update,
        data: para,
        success: resultData => {
          this.$message.success(`操作成功`);
        }
      });
    },
    //保存接口权限
    saveUrl: function() {
      let para = {
        id: this.info.id,
        url_ids: this.$refs.treeUrl.getCheckedKeys().join(`,`)
      };
      this.ajax({
        url: this.API.role.update,
        data: para,
        success: resultData => {
          this.$message.success(`操作成功`);
        }
      });
    },
    //保存自定义权限标识权限
    saveMark: function() {
      let para = {
        id: this.info.id,
        mark_ids: this.$refs.treeMark.getCheckedKeys().join(`,`)
      };
      this.ajax({
        url: this.API.role.update,
        data: para,
        success: resultData => {
          this.$message.success(`操作成功`);
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
.edu-font-3 {
  font-size: 0.3rem;
}
</style>
